<template>
    <div class="studentList">
        <!-- 查询、重置 -->
        <el-form
                :inline="true"
                :model="formInline"
                class="demo-form-inline"
                size="small">
            <el-form-item>
                <el-input
                        v-model="pagination.productName"
                        placeholder="请输入商品名"
                ></el-input>
            </el-form-item>
            <el-form-item>
                <el-input
                        v-model="pagination.productCore"
                        placeholder="请输入商品编码"
                ></el-input>
            </el-form-item>

            <el-form-item>
                <el-button type="primary" @click="find()">查询</el-button>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="reset()">重置</el-button>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="add()">新增</el-button>
            </el-form-item>
        </el-form>
        <el-table :data="dataList" border style="width: 100%">
            <el-table-column prop="productCore" label="商品编码" align="center">
            </el-table-column>
            <el-table-column prop="productName" label="商品名称" align="center">
            </el-table-column>
            <el-table-column prop="price" label="价格" align="center">
            </el-table-column>
            <el-table-column prop="descript" label="商品描述" align="center" width="250px">
            </el-table-column>
            <el-table-column prop="bussinessImgUrl" label="商品图片" width="120">
                <template slot-scope="scope">
                    <el-image :src="imgurl+scope.row.bussinessImgUrl" style="width:50px;height:60px"
                              :preview-src-list="[scope.row.image]">
                    </el-image>
                </template>
            </el-table-column>
            <el-table-column label="操作" align="center">
                <template slot-scope="scope">
                    <el-button
                            type="primary"
                            @click="setN(scope.row)"
                    >编辑
                    </el-button>
                </template>
            </el-table-column>
        </el-table>

        <el-pagination
                class="pagiantion"
                @current-change="handleCurrentChange"
                :current-page="pagination.currentPage"
                :page-size="pagination.pageSize"
                layout="total, prev, pager, next, jumper"
                :total="pagination.total">
        </el-pagination>
        <el-dialog title="查看商品详情" :visible.sync="dialogFormVisible" style="text-align: center" width="800px">
            <el-form :model="form" ref="form">
                <div class="form_item">
                    <el-form-item class="btn" label="编号:" :label-width="formLabelWidth">
                        <el-input v-model="form.productCore" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item class="btn" label="商品名:" :label-width="formLabelWidth">
                        <el-input v-model="form.productName" autocomplete="off"></el-input>
                    </el-form-item>
                </div>
                <div class="form_item">
                    <el-form-item class="btn" label="条形码:" :label-width="formLabelWidth">
                        <el-input v-model="form.barCode" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item class="btn" label="价格:" :label-width="formLabelWidth">
                        <el-input v-model="form.price" autocomplete="off"></el-input>
                    </el-form-item>
                </div>
                <div class="form_item">
                    <el-form-item class="btn"  label="商品图片:" :label-width="formLabelWidth">
                         <el-image :src="imgurl+form.bussinessImgUrl" style="width:50px;height:60px"/>
                    </el-form-item>

                </div>
                <div class="form_item">
                   <!-- 所属分类 TODO -->
                    <el-form-item class="btn" :label-width="formLabelWidth"  label="所属类别:">
                        <!--一级分类-->
                        <el-select
                                style="width: 200px"
                                v-model="form.oneCategoryId"
                                placeholder="一级分类" @change="subjectLevelOneChanged">
                            <el-option
                                    v-for="subject in subjectOneList"
                                    :key="subject.categoryId"
                                    :label="subject.categoryName"
                                    :value="subject.categoryId"/>
                        </el-select>

                        <!-- 二级分类 -->
                        <el-select v-model="form.twoCategoryId" style="width: 200px" placeholder="请选择">
                            <el-option
                                    v-for="subject in subjectTwoList"
                                    :key="subject.categoryId"
                                    :label="subject.categoryName"
                                    :value="subject.categoryId"/>
                        </el-select>
                    </el-form-item>

                    <div class="form_item">
                        <el-form-item class="btn" label="描述:" :label-width="formLabelWidth">
                            <el-input v-model="form.descript" autocomplete="off"></el-input>
                        </el-form-item>

                    </div>
                    <div class="form_item">
                        <el-form-item class="btn"  label="商品状态:" :label-width="formLabelWidth">
                            <el-select
                                    ref="selectDept"
                                    v-model="form.publishStatus"
                                    placeholder="商品状态"
                                    clearable>
                                <el-option
                                        v-for="item in productList"
                                        :key="item.id"
                                        :label="item.title"
                                        :value="item.id"/>
                            </el-select>
                        </el-form-item>

                    </div>

                </div>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="sure()">确 定</el-button>
                <el-button type="erro" @click="no()">取消</el-button>
            </div>
        </el-dialog>








        <el-dialog title="新增商品" :visible.sync="dialogFormTVisible" style="text-align: center" width="800px">
            <el-form :model="form" ref="form">
                <div class="form_item">
                    <el-form-item class="btn" label="编号:" :label-width="formLabelWidth">
                        <el-input v-model="form.productCore" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item class="btn" label="商品名:" :label-width="formLabelWidth">
                        <el-input v-model="form.productName" autocomplete="off"></el-input>
                    </el-form-item>
                </div>
                <div class="form_item">
                    <el-form-item class="btn" label="条形码:" :label-width="formLabelWidth">
                        <el-input v-model="form.barCode" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item class="btn" label="价格:" :label-width="formLabelWidth">
                        <el-input v-model="form.price" autocomplete="off"></el-input>
                    </el-form-item>
                </div>
                <div class="form_item">
                    <el-form-item class="btn"  label="商品图片:" :label-width="formLabelWidth">
                        <el-upload
                                action="#"
                                :show-file-list="false"
                                :auto-upload="false"
                                :multiple="false"
                                :on-change="uploadFile"
                                drag

                                accept="image/jpg,image/jpeg,image/png">
                            <i v-if="imageUrl" class="el-icon-circle-close deleteImg" @click.stop="handleRemove"></i>
                            <img  v-if="imageUrl" :src="imageUrl" class="el-upload--picture-car" />
                            <div v-else>
                                <i class="el-icon-picture" style="margin-top: 40px; font-size: 40px; color: #999a9c"></i>
                                <div>上传图片</div>
                                <div>格式为png、jpeg或jpg</div>
                            </div>
                        </el-upload>
                    </el-form-item>

                </div>
                <div class="form_item">
                    <!-- 所属分类 TODO -->
                    <el-form-item class="btn" :label-width="formLabelWidth"  label="所属类别:">
                        <!--一级分类-->
                        <el-select
                                style="width: 200px"
                                v-model="form.oneCategoryId"
                                placeholder="一级分类" @change="subjectLevelOneChanged">
                            <el-option
                                    v-for="subject in subjectOneList"
                                    :key="subject.categoryId"
                                    :label="subject.categoryName"
                                    :value="subject.categoryId"/>
                        </el-select>

                        <!-- 二级分类 -->
                        <el-select v-model="form.twoCategoryId" style="width: 200px" placeholder="请选择">
                            <el-option
                                    v-for="subject in subjectTwoList"
                                    :key="subject.categoryId"
                                    :label="subject.categoryName"
                                    :value="subject.categoryId"/>
                        </el-select>
                    </el-form-item>
                    <div class="form_item">

                        <el-form-item class="btn" label="描述:" :label-width="formLabelWidth">
                            <el-input v-model="form.descript" autocomplete="off"></el-input>
                        </el-form-item>
                    </div>
<!--                    <div class="form_item">-->
<!--                        <el-form-item class="btn"  label="商品状态:" :label-width="formLabelWidth">-->
<!--                            <el-select-->
<!--                                    ref="selectDept"-->
<!--                                    v-model="form.publishStatus"-->
<!--                                    placeholder="商品状态"-->
<!--                                    clearable>-->
<!--                                <el-option-->
<!--                                        v-for="item in productList"-->
<!--                                        :key="item.id"-->
<!--                                        :label="item.title"-->
<!--                                        :value="item.id"/>-->
<!--                            </el-select>-->
<!--                        </el-form-item>-->

<!--                    </div>-->


                </div>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="sure1()">确 定</el-button>
                <el-button type="erro" @click="no1()">取消</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script>
    import {getProMsgData} from "../../../api/api";
    import {updateProStatus} from "../../../api/api";
    import {getToken} from "../../../utill/Token";
import {getOneCate} from "../../../api/api";
import {getTwoCate} from "../../../api/api";
import {addProduct} from "../../../api/api";
import {setImg} from "../../../api/api";


    export default {
        data() {
            return {
                dialogFormVisible: false,
                dialogFormTVisible:false,
                dataList: [],
                onecateList: [],
                category:{
                    parentId:"",
                },
                formData: "",
                imageUrl:"",
                productList:[{id:0,title:"下架"},{id:1,title:"上架"}],
                search: {},
                pagination: {
                    currentPage: 1, //当前页数
                    pageSize: 5, // 每页显示条数
                    total: 0, // 总条数
                    productCore: "",
                    bussinessId: "",
                    auditStatus: "",
                    productName: "",
                },
                form: {},
                subjectOneList:[],  //一级分类
                subjectTwoList:[],
                imgurl: "http://localhost:8080/images/",
                formInline: {
                    name: "",
                },
                formLabelWidth: "100px",
            };
        },
        created() {
            document.title = "商家管理系统"
            this.pagination.bussinessId = getToken("bussiness_id")
            this.getData();


            //this.getBMethod(this.temp);
            this.getOneSubject()
        },
        computed: {

        },
        methods: { uploadFile(item) {
                this.formData = item.raw; // 图片文件
                this.imageUrl = URL.createObjectURL(item.raw); // 图片上传浏览器回显地址
                console.log(this.imageUrl, "imageUrl")
                console.log(this.formData, "formData")
            },
            handleRemove() {
                this.imageUrl = ""
            },

            add(){
                this.form = {};
                this.dialogFormTVisible=true;
            },
            getOneSubject(){
                getOneCate(this.category).then(res => {
                    console.log("====")
                    console.log(res.data.data)
                    this.subjectOneList=res.data.data
                })

            },
            subjectLevelOneChanged(id){
                this.category.parentId=id;
                getTwoCate(this.category).then(res => {
                    console.log(res.data.data)
                    this.subjectTwoList=res.data.data
                })
                this.getData();
            },
            find() {

                    this.getData()
            },
            reset() {
                this.pagination.bussinessStatus = "",
                    this.pagination.bussinessName = "",
                    this.pagination.bussinessCode = ""

            },
            handleCurrentChange(currentPage) {
                //修改页码值为当前选中的页码值
                this.pagination.currentPage = currentPage;
                //执行查询
                this.getData();
            },
            getData() {

                getProMsgData(this.pagination).then((res) => {
                    if (res.data.status === 200) {
                        this.dataList = res.data.data.records;
                        this.pagination.total = res.data.data.total;
                        console.log(res.data.data.records)
                    }
                });

            },
            setN(row) {

                this.form = {...row}
                this.dialogFormVisible = true
                console.log(this.form.oneCategoryId)
                this.subjectLevelOneChanged(this.form.oneCategoryId)
            },
            sure(){
                updateProStatus(this.form).then((res) => {
                    console.log(res.data)
                    this.dialogFormVisible = false

                    this.getData();
                });

            },
            sure1(){
            var formData = new FormData();
                formData.append("photoFile", this.formData);  // 照片文件
                setImg(formData).then(res => {
                    this.form.bussinessImgUrl=res.data.data
                    this.form.bussinessId=getToken("bussiness_id");
                    console.log(res)
                    addProduct(this.form).then((res)=>{
                        console.log(res.data)
                    })

                })
                this.getData();
                this.dialogFormTVisible =false;

            },
            no(){
                this.dialogFormVisible = false
            },
            no1(){ this.dialogFormTVisible =false}

        },
    };
</script>
<style lang="scss">
    .studentList {
        .demo-form-inline, .el-form-item {
            text-align: left;
            /*float: left;*/
            height: auto;
        }

        .el-input {
            width: auto; // 这里一定要设置为auto 否则由于input是默认width ：100%的
            height: auto;
        }

        .form_item {
         //   border-style: dashed dotted double groove;
            text-align: left;
            width: 100%;
        }

        .btn {
            display: inline-block;

        }

        .el-pagination {
            text-align: left;
            margin-top: 20px;
        }
    }  .deleteImg {
           font-size: 30px;
           position: absolute;
           top: 0;
           right: 0;
           z-index: 999;
       }
    img {
        width: 50%;
        height: 100%;
        background-repeat: no-repeat;
    }


</style>
